/**
 * 学习目标：useEffect - 清理操作
 *    useEffect() 内部返回的回调函数会在组件卸载时自动执行 - 相当于 componentWillUnmount
 */
import { useEffect, useState } from 'react'

export default function App() {
  const [isShow, setIsShow] = useState(false)
  return (
    <div>
      <h1>useEffect-清理操作</h1>
      <button onClick={() => setIsShow(!isShow)}>点击切换显示卡片组件</button>
      {isShow ? <Card /> : null}
    </div>
  )
}

function Card() {
  const fn = () => {
    console.log('窗口大小变化了')
  }

  // 分开写法
  // useEffect(() => {
  //   console.log('组件挂载！！！')
  //   // 注册事件
  //   window.addEventListener('resize', fn)
  // }, [])

  // useEffect(() => {
  //   // useEffect 内部返回的回调函数，会在组件卸载时自动执行
  //   return () => {
  //     console.log('组件卸载了~~~')
  //     // 清理事件
  //     window.removeEventListener('resize', fn)
  //   }
  // }, [])

  // 组合在一起的写法
  useEffect(() => {
    // 挂载时运行的代码
    console.log('组件挂载！！！')
    window.addEventListener('resize', fn)

    // 卸载时运行的代码
    return () => {
      console.log('组件卸载了~~~')
      window.removeEventListener('resize', fn)
    }
  }, [])

  return (
    <div>
      <h2>卡片组件</h2>
    </div>
  )
}
